<template>
  <view class="order-container">
    <view class="section">
      <text>上传图片：</text>
      <button @click="chooseImage">选择图片</button>
      <view v-if="orderImages.length">
        <image 
          v-for="(img, index) in orderImages" 
          :key="index" 
          :src="img" 
          mode="aspectFit" 
          class="uploaded-image"
        />
      </view>
    </view>

    <view class="section">
      <picker mode="selector" :range="weightOptions" @change="handleWeightChange">
        <text>预估重量：{{ estimatedWeight || '请选择' }}</text>
      </picker>
    </view>

    <view class="section">
      <picker mode="selector" :range="recyclingCategories" @change="handleCategoryChange">
        <text>回收品类：{{ recyclingCategory || '请选择' }}</text>
      </picker>
    </view>

    <view class="section">
      <input v-model="collectionAddress" placeholder="请输入回收地址" />
    </view>

    <view class="section">
      <textarea v-model="additionalInstructions" placeholder="其他说明（可选）"></textarea>
    </view>

    <view class="section">
      <picker mode="date" @change="handleDateChange">
        <text>选择回收时间：{{ collectionTime || '请选择时间' }}</text>
      </picker>
    </view>

    <button @click="submitOrder">提交订单</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderImages: [],  // 存储用户上传的图片地址
      estimatedWeight: '',  // 预估重量
      recyclingCategory: '',  // 回收品类
      collectionAddress: '',  // 回收地址
      additionalInstructions: '',  // 用户的附加说明
      collectionTime: '',  // 回收时间
      weightOptions: ['10-50公斤', '50-100公斤', '100公斤以上'],  // 预估重量选项
      recyclingCategories: ['纸皮类', '金属类', '塑料类'],  // 回收品类选项
    };
  },
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 3,
        success: (res) => {
          this.orderImages = res.tempFilePaths;
        },
      });
    },
    handleWeightChange(e) {
      this.estimatedWeight = this.weightOptions[e.detail.value];
    },
    handleCategoryChange(e) {
      this.recyclingCategory = this.recyclingCategories[e.detail.value];
    },
    handleDateChange(e) {
      this.collectionTime = e.detail.value;
    },
    async submitOrder() {
      if (!this.collectionAddress || !this.estimatedWeight || !this.recyclingCategory || !this.collectionTime) {
        return uni.showToast({ title: '请填写完整信息', icon: 'none' });
      }
      const orderData = {
        user_id: 1,  // 示例用户ID，可替换为真实用户ID
        order_images: JSON.stringify(this.orderImages),
        estimated_weight: this.estimatedWeight,
        recycling_category: this.recyclingCategory,
        collection_address: this.collectionAddress,
        additional_instructions: this.additionalInstructions,
        collection_time: new Date(this.collectionTime).getTime(),
        createtime: Date.now(),
        updatetime: Date.now(),
        order_status: '已下单',
      };
      try {
        // 请求后端接口保存订单
        const res = await uni.request({
          url: 'http://localhost:8088/api/recyclable/order/add',  // 替换为实际API接口地址
          method: 'POST',
          data: orderData,
        });
        if (res.statusCode === 200) {
          uni.showToast({ title: '订单提交成功', icon: 'success' });
        } else {
          throw new Error('订单提交失败');
        }
      } catch (error) {
        uni.showToast({ title: error.message, icon: 'none' });
      }
    },
  },
};
</script>

<style scoped>
.order-container {
  padding: 20px;
}
.section {
  margin-bottom: 20px;
}
.uploaded-image {
  width: 100px;
  height: 100px;
  margin-right: 10px;
}
</style>